<template>
  <div class="container">
    <el-button type="success" round size="small" @click="centerDialogVisible = true">修改菜单</el-button>
    <Teleport to="#app">
      <el-dialog @close="close" v-model="centerDialogVisible" title="修改菜单" width="30%">
        <!-- 主题内容 -->
        <div class="box">
          <el-form :rules="rules" ref="ruleFormRef" label-position="right" label-width="100px" :model="meunData" style="max-width: 460px">
            <el-form-item prop="name" label="菜单名字">
              <el-input v-model="meunData.name" />
            </el-form-item>
            <el-form-item prop="path" label="菜单路径">
              <el-input v-model="meunData.path" />
            </el-form-item>
            <el-form-item prop="pagePath" label="页面路径">
              <el-input v-model="meunData.pagePath" />
            </el-form-item>
            <template v-if="isIconSelect">
              <el-form-item prop="icon" label="菜单图标">
                <el-select clearable v-model="meunData.icon" placeholder="请选择菜单图标">
                  <el-option-group v-for="group in iconOptions" :key="group.label" :label="group.label">
                    <el-option v-for="item in group.options" :key="item.icon_id" :label="item.name" :value="item.name">
                      <div class="my-option">
                        <span>{{ item.name }}</span>
                        <el-icon>
                          <component :is="item.name" />
                        </el-icon>
                      </div>
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <!-- 主题内容结束 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="close">关闭</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef) ">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </Teleport>
  </div>
</template>
<script  setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { insetChildrenMenu, updateMenu } from '@/api/menu.js'
const props = defineProps({
  iconOptions: {
    type: Array,
    default: () => []
  },
  isIconSelect: {
    type: Array,
    default: () => []
  },
  id: {
    type: Number,
    default: null
  },
  baseFrom: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['updaTeTable'])
let centerDialogVisible = ref(false)
let meunData = reactive({
  id: props.id,
  name: props.baseFrom.name,
  path: props.baseFrom.path,
  icon: props.baseFrom.icon,
  pagePath: props.baseFrom.pagePath
})
const { proxy } = getCurrentInstance()
const updateMenuFn = meunData => {
  meunData.pid = props.pid
  updateMenu(meunData).then(res => {
    if (res.data) {
      emits('updaTeTable')
      proxy.$Message({
        type: 'success',
        message: res.msg
      })
    } else {
      proxy.$Message.error(res.msg)
    }
  })
}
const ruleFormRef = ref()
const rules = reactive({
  name: [
    { required: true, message: '不能为空！', trigger: 'blur' },
    { min: 2, max: 8, message: '长度应该在2-8个字符之间！', trigger: 'blur' }
  ],
  path: [
    { required: true, message: '不能为空！', trigger: 'blur' },
    { min: 1, max: 50, message: '长度应该在1-50个字符之间！', trigger: 'blur' }
  ],
  icon: [{ required: true, message: '不能为空！', trigger: 'blur' }],
  pagePath: [{ required: true, message: '不能为空！', trigger: 'blur' }]
})

const close = () => {
  centerDialogVisible.value = false
  ruleFormRef.value.resetFields()
}
const submitForm = ruleFormRef => {
  if (!ruleFormRef) return
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      updateMenuFn(meunData)
      centerDialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="less" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.container {
  padding-right: 10px;
}
.my-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>